<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:70:"D:\wamp\www\blog\public/../application/index\view\public\register.html";i:1520344478;}*/ ?>
<!DOCTYPE html>
<head>
    <title>注册</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="/static/index/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="/static/index/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/static/index/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
    <link href="/static/index/css/templatemo_style.css" rel="stylesheet" type="text/css">
    <script src="/static/index/js/jquery-1.8.3.min.js"></script>
    <style>
        .code-box{
            position: relative;
            height: 45px;
        }
        .get-code{
            display: block;
            width: 100%;
            height: 45px;
            background: #272725;
            /*margin-top: 30px;*/
            color: #fff;
            font-size: 16px;
            line-height: 45px;
            text-align: center;
            font-weight: bold;
            cursor: pointer;
        }

        .code-cover{
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
        }



    </style>
</head>
<body class="templatemo-bg-image-2">
<div class="container">
    <div class="col-md-12">
        <form class="form-horizontal templatemo-contact-form-1" role="form" action="<?php echo url('index/register/add'); ?>" method="post" onsubmit="return reAddFrom();">
            <div class="form-group">
                <div class="col-md-12">
                    <h1 class="margin-bottom-15">注册</h1>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-12">
                    <div class="templatemo-input-icon-container">
                        <i class="fa fa-user"></i>
                        <input type="text" class="form-control" onblur="reName();" id="username" name="username" placeholder="用户名">
                    </div>
                </div>
                <div class="col-md-12 middle"></div>
            </div>
            <div class="form-group">
                <div class="col-md-12">
                    <div class="templatemo-input-icon-container">
                        <i class="fa fa-envelope-o"></i>
                        <input type="email" class="form-control" onblur="reEmail();" id="email" name="email" placeholder="邮箱">
                    </div>
                </div>
                <div class="col-md-12 middle"></div>
            </div>
            <div class="form-group">
                <div class="col-md-12">
                    <div class="templatemo-input-icon-container">
                        <i class="fa fa-phone"></i>
                        <input type="text" class="form-control" id="tel" onblur="reTel();" name="tel" placeholder="手机号">
                    </div>
                </div>
                <div class="col-md-12 middle"></div>
            </div>

            <div class="form-group">
                <div class="col-md-8">
                    <div class="templatemo-input-icon-container">
                        <input type="text" class="form-control"  id="code" name="code" placeholder="验证码">
                    </div>
                </div>
                <div class="col-md-4">
                   <div class="code-box">
                       <span class="get-code">获取验证码</span>
                       <span class="code-cover"></span>
                   </div>

                </div>
            </div>

            <div class="form-group">
                <div class="col-md-12">
                    <div class="templatemo-input-icon-container">
                        <i class="fa fa-lock"></i>
                        <input type="password" class="form-control" onblur="rePassword();" id="password" name="password" placeholder="密码">
                    </div>
                </div>
                <div class="col-md-12 middle"></div>
            </div>

            <div class="form-group">
                <div class="col-md-12">
                    <div class="templatemo-input-icon-container">
                        <i class="fa fa-lock"></i>
                        <input type="password" class="form-control" onblur="rePwd();" id="pwd" name="pwd" placeholder="确认密码">
                    </div>
                </div>
                <div class="col-md-12 middle"></div>
            </div>

            <div class="form-group">
                <div class="col-md-12">
                    <input type="submit" class="btn  form-control" style="background-color: #37B0D5;" value="提交">
                </div>

            </div>

            <div class="form-group">
                <div class="col-md-12">
                    <a href="<?php echo url('index/login/index'); ?>" class="text-center">已注册，去登录</a>
                </div>
            </div>
    </div>
</div>

<script>
    var timer = null;
    var total = 120;
    function  secondCount() {
        total--;
        $('.get-code').html(total+'s后重新发送');
        if(total <= 0){
            $('.get-code').html('获取验证码');
            $('.code-cover').css({'display':'none'});
            clearInterval(timer);
        }
    }

    $(function(){
        //发送验证码
        $('.get-code').click(function(){
            var tel = $('#tel').val();
            console.log(tel);
            $.ajax({
                type : 'post',
                url : "<?php echo url('index/register/getCode'); ?>",
                data : {'tel':tel},
                datatype : 'json',
                success : function(data){
                   if(data.status){
                       $('.get-code').html('120s后重新发送');
                       $('.code-cover').css({'display':'block'});
                       timer = setInterval(secondCount,1000);
                   }else{
                      alert('请输入正确手机号');
                    }
                },
                error : function(){
                    alert('请输入手机号');
                }

            });
        });

        //加载页面获取焦点
        $(function(){
            $('#username').focus();
        });
    });

    function reName(){
        var username = $('#username').val();
        if(!/^([a-zA-Z0-9\u4e00-\u9fa5\·]{1,10})$/.test(username)){
            $('.middle').eq(0).html('不能包含特殊符号。1到10字符').css({'color': 'red'});
            return false;
        }else{
            $.post("<?php echo url('index/register/reName'); ?>",{'username':username},function(data){
               if(data.status){
                   $('.middle').eq(0).html(data.message).css({'color': 'green'});
                   return true;
               }else{
                   $('.middle').eq(0).html(data.message).css({'color': 'red'});
                   return false;
               }
            });
        }
    }

    function reEmail(){
        var email = $('#email').val();
        if(!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(email)){
            $('.middle').eq(1).html('邮箱的基本格式为“名称@域名”').css({'color': 'red'});
            return false;
        }else{
            $.post("<?php echo url('index/register/reEmail'); ?>",{'email':email},function(data){
                if(data.status){
                    $('.middle').eq(1).html(data.message).css({'color': 'green'});
                    return true;
                }else{
                    $('.middle').eq(1).html(data.message).css({'color': 'red'});
                    return false;
                }
            });
        }
    }

    function reTel(){
        var tel = $('#tel').val();
        if(!/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(19[0-9]{1}))+\d{8})$/.test(tel)){
            $('.middle').eq(2).html('请输入有效的手机号码！').css({'color': 'red'});
            return false;
        }else{
            $.post("<?php echo url('index/register/reTel'); ?>",{'tel':tel},function(data){
                if(data.status){
                    $('.middle').eq(2).html(data.message).css({'color': 'green'});
                    return true;
                }else{
                    $('.middle').eq(2).html(data.message).css({'color': 'red'});
                    return false;
                }
            });
        }
    }

    function rePassword(){
        var password = $('#password').val();
        if(!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,21}$/.test(password)){
            $('.middle').eq(3).html('只能是6-21个字母、数字组合而成').css({'color': 'red'});
            return false;
        }else{
            $('.middle').eq(3).html('正确').css({'color': 'green'});
            return true;
        }
    }

    function rePwd(){
        var pwd = $('#pwd').val();
        var password = $('#password').val();
        if(pwd !== password || pwd === ''){
            $('.middle').eq(4).html('两次密码不一致,不能为空').css({'color': 'red'});
            return false;
        }else{
            $('.middle').eq(4).html('正确').css({'color': 'green'});
            return true;
        }
    }

    function reAddFrom(){
        return reName() && reEmail() && reTel() && rePassword() && rePwd();
    }

</script>
</body>
</html>